<template>
  <view class="search-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="back-btn" @click="onBack">
        <uni-icons type="left" size="20"></uni-icons>
      </view>
      <view class="search-input">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <input 
          type="text" 
          placeholder="黄金手链" 
          placeholder-class="placeholder-style"
          v-model="searchText"
        >
      </view>
      <view class="search-btn" @click="onSearch">
        搜索
      </view>
    </view>

    <!-- 最近搜索 -->
    <view class="recent-search" v-if="showRecent">
      <view class="section-title">
        <text>最近搜索</text>
        <uni-icons type="trash" size="16" @click="clearRecent"></uni-icons>
      </view>
      <!-- 这里可以根据实际需求添加最近搜索记录 -->
    </view>

    <!-- 热门搜索 -->
    <view class="hot-search">
      <view class="section-title">
        <text>热门搜索</text>
        <text class="hide-btn" @click="toggleHotSearch">隐藏</text>
      </view>
      
      <view class="hot-tags" v-if="showHotSearch">
        <view class="tag" v-for="(item, index) in hotTags" :key="index" @click="searchTag(item)">
          {{ item }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      showRecent: false, // 控制最近搜索显示，实际项目可根据是否有历史记录决定
      showHotSearch: true,
      hotTags: [
        '电脑椅', '煲汤锅砂锅', '万宝龙钱包', '斯诺克球杆',
        '乒乓球拍', '厨房消毒柜', '车载收音机', '电视柜',
        '洗碗机家用', '对讲机', '晾衣架', '养生壶'
      ]
    };
  },
  methods: {
    onBack() {
      // 返回上一页
      uni.navigateBack();
    },
    onSearch() {
      // 执行搜索逻辑
      if (this.searchText.trim()) {
        console.log('搜索内容:', this.searchText);
        // 实际项目中可跳转到搜索结果页
      }
    },
    clearRecent() {
      // 清空最近搜索记录
      this.showRecent = false;
      uni.showToast({
        title: '已清空最近搜索',
        icon: 'none'
      });
    },
    toggleHotSearch() {
      this.showHotSearch = !this.showHotSearch;
    },
    searchTag(tag) {
      // 搜索标签内容
      this.searchText = tag;
      this.onSearch();
    }
  }
};
</script>

<style scoped>
.search-page {
  background-color: #ffffff;
  min-height: 100vh;
  padding-bottom: 20px;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background-color: #f5f5f5;
}

.back-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 30px;
  padding: 12px 24px;
  font-size: 28px;
}

.search-input input {
  margin-left: 12px;
  flex: 1;
  height: 40px;
  line-height: 40px;
}

.placeholder-style {
  color: #999999;
}

.search-btn {
  width: 120px;
  height: 64px;
  background-color: #e53935;
  color: #ffffff;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-left: 16px;
}

/* 通用标题样式 */
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 24px 20px;
  font-size: 28px;
  color: #333333;
}

/* 最近搜索样式 */
.recent-search {
  border-bottom: 1px solid #f5f5f5;
}

/* 热门搜索样式 */

.hide-btn {
  color: #666666;
  font-size: 26px;
}

.hot-tags {
  display: flex;
  flex-wrap: wrap;
  padding: 0 24px;
  gap: 20px;
}

.tag {
  background-color: #f5f5f5;
  border-radius: 30px;
  padding: 14px 30px;
  font-size: 26px;
  color: #333333;
  white-space: nowrap;
}

.tag:nth-child(1),
.tag:nth-child(2),
.tag:nth-child(3) {
  color: #e53935;
  background-color: #fff5f5;
}
</style>